<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>志愿者管理</title>
    <link type="favicon" rel="shortcut icon" href="./static/img/favicon.ico" />
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <link rel="stylesheet" href="./static/css/init.css">
    <link rel="stylesheet" href="./static/less/common.css">
    <link rel="stylesheet" href="./static/less/volunteers.css">
    <link href="./static/css/spop.min.css" rel="stylesheet"/>
    <script src="./static/js/Syunew6.js"></script>
    <script src="./static/js/isLogin.js"></script>
</head>
<body>
    <div id="volunteers" class="volunteers-box common-box">
        <div class="head-box">
            <div class="logo-box">
                <img class="logo" src="./static/img/logo_1.png" alt="">
                <span class="title">成都杜甫草堂博物馆综合信息管理平台</span>
            </div>
            <div class="user-box">
                <div class="name">{{userData.userName}}，欢迎您</div>
                <div class="logout">
                    <span @click="logout" class="cus">
                        <i class="glyphicon glyphicon-log-out"></i>
                        <span>登出</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="content">
            <div class="address-box">
                <div class="address">
                    <a class="href" href="/index.html">首页</a>
                    <i class="glyphicon glyphicon-menu-right right"></i>
                    <span>志愿者管理</span>
                </div>
                <div class="time">
                    {{date + '&nbsp;星期' + week + '&nbsp;' + time}}
                </div>
            </div>
            <!-- tab大屏 -->
            <div class="tab">
                <p class="title" :class="tabCurrent == 1 ? 'current' : 'cus'" @click="tabClick(1)" v-if="menuConfig('志愿者录入')">志愿者录入</p>
                <p class="title" :class="tabCurrent == 2 ? 'current' : 'cus'" @click="tabClick(2)" v-if="menuConfig('志愿者查询')">志愿者查询</p>
                <p class="title" :class="tabCurrent == 3 ? 'current' : 'cus'" @click="tabClick(3)" v-if="menuConfig('活动录入')">活动录入</p>
                <p class="title" :class="tabCurrent == 4 ? 'current' : 'cus'" @click="tabClick(4)" v-if="menuConfig('活动查询')">活动查询</p>
            </div>
            <!-- tab小屏 -->
            <div class="container tab2">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="true">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand">{{tabs[tabCurrent]}}</a>
                </div>
                <nav id="bs-navbar" class="navbar-collapse collapse in" aria-expanded="true">
                    <ul class="nav navbar-nav">
                        <li v-if="menuConfig('志愿者录入')">
                            <a :class="tabCurrent == 1 ? 'current' : ''" @click="tabClick(1)">志愿者录入</a>
                        </li>
                        <li v-if="menuConfig('志愿者查询')">
                            <a :class="tabCurrent == 2 ? 'current' : ''" @click="tabClick(2)">志愿者查询</a>
                        </li>
                        <li v-if="menuConfig('活动录入')">
                            <a :class="tabCurrent == 3 ? 'current' : ''" @click="tabClick(3)">活动录入</a>
                        </li>
                        <li v-if="menuConfig('活动查询')">
                            <a :class="tabCurrent == 4 ? 'current' : ''" @click="tabClick(4)">活动查询</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="con-box">
                <!-- 志愿者录入 -->
                <div class="clearfix" v-if="tabCurrent == 1">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <label class="u_label"><span class="red">*</span>姓名：</label>
                            <input type="text" v-model="addVolunteer.name">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label"><span class="red">*</span>性别：</label>
                            <select v-model="addVolunteer.sex">
                                <option style="display:none" value=""请选择></option>
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label"><span class="red">*</span>出生日期：</label>
                            <input type="date" v-model="addVolunteer.birthday">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label"><span class="red">*</span>身份证号码：</label>
                            <input type="text" v-model="addVolunteer.idCard">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">身高：</label>
                            <input type="text" v-model="addVolunteer.height"><span>(cm)</span>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">体重：</label>
                            <input type="text" v-model="addVolunteer.weight"><span>(kg)</span>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label"><span class="red">*</span>学校：</label>
                            <input type="text" v-model="addVolunteer.school">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">专业：</label>
                            <input type="text" v-model="addVolunteer.specialty">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label"><span class="red">*</span>手机：</label>
                            <input type="text" oninput="value=value.replace(/[^\d]/g,'')" v-model="addVolunteer.phone">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">email：</label>
                            <input type="email" v-model="addVolunteer.email">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label"><span class="red">*</span>现住址：</label>
                            <select class="form-control" style="width: 120px;" v-model="addVolunteer.address1">
                                <option value="四川省成都市">四川省成都市</option>
                            </select>
                            <select class="form-control" style="width: 120px;margin-left: 10px" v-model="addVolunteer.address2">
                                <option v-for="(item,i) in cityList" :key="i">{{item}}</option>
                            </select>
                            <input type="text" v-model="addVolunteer.address3" style="margin-left: 10px" placeholder="详细地址">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">家庭住址：</label>
                            <input type="text" v-model="addVolunteer.address">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">专长爱好：</label>
                            <input type="text" v-model="addVolunteer.hobby">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">外语语种：</label>
                            <!-- <input type="text" v-model="addVolunteer.languageType"> -->
                            <select class="form-control" v-model="addVolunteer.languageType" style="width: 120px;">
                                <option value="0">汉语</option>
                                <option value="1">英语</option>
                                <option value="2">日语</option>
                                <option value="3">韩语</option>
                            </select>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">计算机及熟练程度：</label>
                            <input type="text" v-model="addVolunteer.computerType">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">健康状况：</label>
                            <input type="text" v-model="addVolunteer.healthStatus">
                        </li>
                        <li class="list-group-item" >
                            <label class="u_label">自我介绍：</label>
                            <textarea rows="5" v-model="addVolunteer.selfIntroduction"></textarea>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">培训记录：</label>
                            <textarea rows="5" v-model="addVolunteer.trainingRecord"></textarea>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">奖励记录：</label>
                            <textarea rows="5" v-model="addVolunteer.rewardsRecord"></textarea>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">附件：</label>
                            <input type="file" @change="imgUpload($event,2)" style="width: 86px">
                            <span style="line-height:30px" v-show="addVolunteer.accessoryUrl">已上传附件：{{addVolunteer.accessoryUrl}}</span>
                        </li>
                        <div class="img-box">
                            <label for="addImg" class="add_label cus" title="点击上传照片">
                                <i class="add glyphicon glyphicon-plus" v-if="!addVolunteer.headerImg"></i>
                                <img :src="baseUrl + addVolunteer.headerImg" alt="" v-else>
                                <input type="file" id="addImg" style="display: none" accept="image/*" @change="imgUpload($event,1)">
                            </label>
                        </div>
                    </ul>
                    <div class="btn-box">
                        <div class="btn submit" @click="提交志愿者()">提交</div>
                    </div>
                </div>
                <!-- 志愿者查询 -->
                <div class="clearfix" v-else-if="tabCurrent == 2">
                    <form class="form-inline form">
                        <div class="form-group">
                            <label for="area">地区</label>
                            <select class="form-control" id="area">
                                <option value="0" selected>四川省成都市</option>
                            </select>
                            <select class="form-control" id="area2" v-model="searForm.currentAddress">
                                <option value="" selected>全部</option>
                                <option v-for="(item,i) in cityList" :key="i">{{item}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="name2">姓名</label>
                            <input class="form-control" type="text" v-model="searForm.name">
                        </div>
                        <div class="form-group">
                            <label for="sex2">性别</label>
                            <select class="form-control" v-model="searForm.sex">
                                <option value="">全部</option>
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>年龄</label>
                            <input type="number" class="form-control" style="width: 60px;" v-model="startAge">
                            -
                            <input type="number" class="form-control" style="width: 60px;" v-model="endAge">
                        </div>
                        <div class="form-group">
                            <label for="height">身高</label>
                            <!-- <input class="form-control" type="number" v-model="searForm.height">(cm) -->
                            <select class="form-control" v-model="searForm.height">
                                <option value="">全部</option>
                                <option value="191,300">190以上</option>
                                <option value="181,190">180~190</option>
                                <option value="171,180">170~180</option>
                                <option value="161,170">160~170</option>
                                <option value="150,160">150~160</option>
                                <option value="0,149">150以下</option>
                            </select>
                        </div>
                    </form>
                    <div class="btn-box col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="btn submit" @click="获取志愿者列表(2)">筛选</div>
                        <div class="btn fabu" @click="导出表格()">导出</div>
                    </div>
                    <div class="table-box">
                        <div class="table-responsive">
                            <table class="table" id="showTable">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>姓名</th>
                                        <th>性别</th>
                                        <th>出生日期</th>
                                        <th>学校</th>
                                        <th>身高</th>
                                        <th>专长爱好</th>
                                        <th>外语语种</th>
                                        <th>计算机</th>
                                        <th>参加活动次数</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,i) in volunteerList">
                                        <td class="active">{{item.id}}</td>
                                        <td class="warning">{{item.name}}</td>
                                        <td class="danger">{{item.sex === '1' ? '男' : '女'}}</td>
                                        <td class="info">{{timeFormat('yyyy-MM-dd',item.birthday)}}</td>
                                        <td class="active">{{item.school}}</td>
                                        <td class="danger">{{item.height}}</td>
                                        <td class="success" :title="item.hobby || ''"><p class="omit">{{item.hobby ? item.hobby : '未知'}}</p></td>
                                        <td class="warning">{{item.languageType ? item.languageType === '0' ? '汉语' : item.languageType === '1' ? '英语' : item.languageType === '2' ? '日语' : '韩语' : '未知'}}</td>
                                        <td class="danger">{{item.computerType ? item.computerType : '未知'}}</td>
                                        <td class="info">{{item.activityCount}}</td>
                                        <td class="success">
                                            <span class="u_btn cus" data-toggle="modal" data-target="#myModal" @click="修改(item)">查看</span>
                                            <span class="u_btn cus" data-toggle="modal" data-target="#myModal2" @click="修改(item)">修改</span>
                                            <span class="u_btn cus" data-toggle="modal" data-target="#delModal" @click="删除(item.id)">删除</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <nav aria-label="Page navigation" class="u_pager hidden-xs">
                            <span class="total">总计{{total}}人</span>
                            <ul class="pagination">
                                <li :class="currentPage === 1 ? 'disabled' : ''" @click="topPage">
                                    <a href="javascript:void(0);" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <!-- <li v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)"><a href="javascript:void(0);">{{i}}</a></li> -->
                                <li v-show="userPages.length < 10" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)"><a href="javascript:void(0);">{{i}}</a></li>
                                <li v-show="userPages.length > 9" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)">
                                    <a href="javascript:void(0);" v-if="i == 1 || i == 2 || i == currentPage || i == (currentPage - 1) || i == (currentPage + 1) || i == (userPages.length) || i == (userPages.length - 1)">{{i}}</a>
                                    <a class="u_page_n" href="javascript:void(0);" v-else-if="i == (currentPage - 2)|| i == (currentPage + 2)"><span aria-hidden="true">...</span></a>
                                </li>
                                <li :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''" @click="nextPage">
                                    <a href="javascript:void(0);" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        <nav class="u_pager visible-xs-block">
                            <ul class="pager">
                                <li @click="topPage" :class="currentPage === 1 ? 'disabled' : ''"><a href="javascript:void(0);">上一页</a></li>
                                <li @click="nextPage" :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''"><a href="javascript:void(0);">下一页</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="table-box" style="display: none">
                        <div class="table-responsive">
                            <table class="table" id="volunteerTable">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>姓名</th>
                                        <th>性别</th>
                                        <th>出生日期</th>
                                        <th>学校</th>
                                        <th>身高</th>
                                        <th>专长爱好</th>
                                        <th>外语语种</th>
                                        <th>计算机</th>
                                        <th>参加活动次数</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,i) in volunteerList">
                                        <td class="active">{{item.id}}</td>
                                        <td class="warning">{{item.name}}</td>
                                        <td class="danger">{{item.sex === '1' ? '男' : '女'}}</td>
                                        <td class="info">{{timeFormat('yyyy-MM-dd',item.birthday)}}</td>
                                        <td class="active">{{item.school}}</td>
                                        <td class="danger">{{item.height}}</td>
                                        <td class="success">{{item.hobby ? item.hobby : '未知'}}</td>
                                        <td class="warning">{{item.languageType ? item.languageType === '0' ? '汉语' : item.languageType === '1' ? '英语' : item.languageType === '2' ? '日语' : '韩语' : '未知'}}</td>
                                        <td class="danger">{{item.computerType ? item.computerType : '未知'}}</td>
                                        <td class="info">0</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <nav aria-label="Page navigation" class="u_pager hidden-xs">
                            <span class="total">总计{{total}}人</span>
                            <ul class="pagination">
                                <li :class="currentPage === 1 ? 'disabled' : ''" @click="topPage">
                                    <a href="javascript:void(0);" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <!-- <li v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)"><a href="javascript:void(0);">{{i}}</a></li> -->
                                <li v-show="userPages.length < 10" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)"><a href="javascript:void(0);">{{i}}</a></li>
                                <li v-show="userPages.length > 9" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)">
                                    <a href="javascript:void(0);" v-if="i == 1 || i == 2 || i == currentPage || i == (currentPage - 1) || i == (currentPage + 1) || i == (userPages.length) || i == (userPages.length - 1)">{{i}}</a>
                                    <a class="u_page_n" href="javascript:void(0);" v-else-if="i == (currentPage - 2)|| i == (currentPage + 2)"><span aria-hidden="true">...</span></a>
                                </li>
                                <li :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''" @click="nextPage">
                                    <a href="javascript:void(0);" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        <nav class="u_pager visible-xs-block">
                            <ul class="pager">
                                <li @click="topPage" :class="currentPage === 1 ? 'disabled' : ''"><a href="javascript:void(0);">上一页</a></li>
                                <li @click="nextPage" :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''"><a href="javascript:void(0);">下一页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
                <!-- 活动录入 -->
                <div class="clearfix" v-else-if="tabCurrent == 3">
                    <form class="form-horizontal form col-lg-8 col-md-10 col-sm-12 col-xs-12">
                        <div class="form-group">
                            <label for="activeName" class="col-sm-2 control-label">活动名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="activeName" v-model="addActivites.name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="address" class="col-sm-2 control-label">活动地点</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="address" v-model="addActivites.address">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="time" class="col-sm-2 control-label">活动时间</label>
                            <div class="col-sm-10" style="max-width: 220px">
                                <input type="date" class="form-control" id="time" v-model="addActivites.activityTime">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">志愿者</label>
                            <div class="btn-box">
                                <ul class="name-list">
                                    <li class="one cus" v-for="(item,i) in addNames" :key="i" title="点击移除" @click="delName(i,1)">
                                        {{item.name}}
                                    </li>
                                    <li class="one add cus" data-toggle="modal" data-target="#myModal3" @click="打开添加志愿者()">
                                        <i class="glyphicon glyphicon-plus"></i>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </form>
                    <div class="btn-box col-lg-8 col-md-10 col-sm-12 col-xs-12">
                        <div class="btn submit" @click="活动录入()">保存</div>
                    </div>
                </div>
                <!-- 活动查询 -->
                <div class="clearfix" v-else-if="tabCurrent == 4">
                    <form class="form-inline form">
                        <div class="form-group">
                            <label for="activeName2">活动名称</label>
                            <input type="text" class="form-control" id="activeName2" v-model="activeSearchForm.name">
                        </div>
                        <div class="form-group">
                            <label for="sex2">日期</label>
                            <input type="date" class="form-control" v-model="activeSearchForm.startDate">
                            -
                            <input type="date" class="form-control" v-model="activeSearchForm.endDate">
                        </div>
                    </form>
                    <div class="btn-box col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="btn submit" @click="获取活动列表(2)">筛选</div>
                    </div>
                    <div class="table-box">
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>活动名称</th>
                                        <th>活动地点</th>
                                        <th>日期</th>
                                        <th>参与志愿者</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr v-for="(item,i) in activeList">
                                        <td class="warning">{{item.name}}</td>
                                        <td class="danger">{{item.address}}</td>
                                        <td class="info">{{timeFormat('yyyy-MM-dd',item.activityTime)}}</td>
                                        <td class="active">{{item.volunteer}}</td>
                                        <td class="success">
                                            <span class="u_btn cus" data-toggle="modal" data-target="#myModal4" @click="修改活动(item)">修改</span>
                                            <span class="u_btn cus" data-toggle="modal" data-target="#delModal" @click="删除活动(item)">删除</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            <p v-show="activeList.length == 0">暂无数据</p>
                        </div>
                        <nav aria-label="Page navigation" class="u_pager hidden-xs">
                            <span class="total">总计{{total1}}条</span>
                            <ul class="pagination">
                                <li :class="currentPage1 === 1 ? 'disabled' : ''" @click="topPage">
                                    <a href="javascript:void(0);" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <!-- <li v-for="i in userPages1" :class="currentPage === i ? 'active' : ''" @click="selectPage(i,1)"><a href="javascript:void(0);">{{i}}</a></li> -->
                                <li v-show="userPages1.length < 10" v-for="i in userPages1" :class="currentPage === i ? 'active' : ''" @click="selectPage(i,1)"><a href="javascript:void(0);">{{i}}</a></li>
                                <li v-show="userPages1.length > 9" v-for="i in userPages1" :class="currentPage === i ? 'active' : ''" @click="selectPage(i,1)">
                                    <a href="javascript:void(0);" v-if="i == 1 || i == 2 || i == currentPage || i == (currentPage - 1) || i == (currentPage + 1) || i == (userPages1.length) || i == (userPages1.length - 1)">{{i}}</a>
                                    <a class="u_page_n" href="javascript:void(0);" v-else-if="i == (currentPage - 2)|| i == (currentPage + 2)"><span aria-hidden="true">...</span></a>
                                </li>
                                <li :class="currentPage1 === userPages1[userPages1.length-1] ? 'disabled' : ''" @click="nextPage(1)">
                                    <a href="javascript:void(0);" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                        <nav class="u_pager visible-xs-block">
                            <ul class="pager">
                                <li @click="topPage" :class="currentPage1 === 1 ? 'disabled' : ''"><a href="javascript:void(0);">上一页</a></li>
                                <li @click="nextPage" :class="currentPage1 === userPages1[userPages1.length-1] ? 'disabled' : ''"><a href="javascript:void(0);">下一页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            Copyright 成都杜甫草堂博物馆
        </div>

        <!-- 查看志愿者模态框 -->
        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog u-modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">查看志愿者</h4>
                </div>
                <div class="modal-body">
                    <ul class="list-group">
                        <li class="list-group-item">姓名：{{volunteerEdit.name}}</li>
                        <li class="list-group-item">性别：{{volunteerEdit.sex === '1' ? '男' : '女'}}</li>
                        <li class="list-group-item">出生日期：{{volunteerEdit.birthday}}</li>
                        <li class="list-group-item">身高：{{volunteerEdit.height}}(cm)</li>
                        <li class="list-group-item">体重：{{volunteerEdit.weight}}(kg)</li>
                        <li class="list-group-item">学校：{{volunteerEdit.school}}</li>
                        <li class="list-group-item">专业：{{volunteerEdit.specialty}}</li>
                        <li class="list-group-item">手机：{{volunteerEdit.phone}}</li>
                        <li class="list-group-item">email：{{volunteerEdit.email}}</li>
                        <li class="list-group-item">现住址：{{volunteerEdit.address1 + volunteerEdit.address2 + volunteerEdit.address3}}</li>
                        <li class="list-group-item">家庭住址：{{volunteerEdit.address}}</li>
                        <li class="list-group-item">身份证号码：{{volunteerEdit.idCard}}</li>
                        <li class="list-group-item">专长爱好：{{volunteerEdit.hobby}}</li>
                        <li class="list-group-item">外语语种：{{volunteerEdit.languageType ? volunteerEdit.languageType === '0' ? '汉语' : volunteerEdit.languageType === '1' ? '英语' : volunteerEdit.languageType === '2' ? '日语' : '韩语' : '未知'}}</li>
                        <li class="list-group-item">计算机及熟练程度：{{volunteerEdit.computerType}}</li>
                        <li class="list-group-item">健康状况：{{volunteerEdit.healthStatus}}</li>
                        <li class="list-group-item">自我介绍：{{volunteerEdit.selfIntroduction}}</li>
                        <li class="list-group-item">培训记录：{{volunteerEdit.trainingRecord}}</li>
                        <li class="list-group-item">奖励记录：{{volunteerEdit.rewardsRecord}}</li>
                        <li class="list-group-item">附件：{{ volunteerEdit.accessoryUrl ? '' : '暂无附件'}}
                            <a download :href="baseUrl + item" v-for="(item,i) in volunteerEdit.accessoryUrl.split(',')">{{item}}</a>
                            <p v-show="volunteerEdit.accessoryUrl">（如果是图片等多媒体文件,点击会直接打开文件，如需下载请点击鼠标右键，选择链接另存为..，即可下载文件）</p>
                        </li>
                    </ul>
                    <div class="img-box">
                        <img :src="baseUrl + volunteerEdit.headerImg" alt="">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
                </div>
            </div>
        </div>

        <!-- 修改志愿者模态框 -->
        <div class="modal fade" id="myModal2" tabindex="-3" role="dialog" aria-labelledby="myModalLabel2">
            <div class="modal-dialog u-modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" @click="获取志愿者列表()"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">修改志愿者</h4>
                </div>
                <div class="modal-body">
                    <ul class="list-group">
                        <li class="list-group-item">
                            <label class="u_label">姓名：</label>
                            <input type="text" v-model="volunteerEdit.name">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">性别：</label>
                            <select v-model="volunteerEdit.sex">
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">出生日期：</label>
                            <input type="date" value="1995-10-01" v-model="volunteerEdit.birthday">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">身高：</label>
                            <input type="text" placeholder="单位（cm）" v-model="volunteerEdit.height">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">体重：</label>
                            <input type="text" placeholder="单位（kg）" v-model="volunteerEdit.weight">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">学校：</label>
                            <input type="text" v-model="volunteerEdit.school">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">专业：</label>
                            <input type="text" v-model="volunteerEdit.specialty">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">手机：</label>
                            <input type="text" oninput="value=value.replace(/[^\d]/g,'')" v-model="volunteerEdit.phone">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">email：</label>
                            <input type="email" v-model="volunteerEdit.email">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label"><span class="red">*</span>现住址：</label>
                            <select class="form-control" style="width: 120px;" v-model="volunteerEdit.address1">
                                <option value="四川省成都市">四川省成都市</option>
                            </select>
                            <select class="form-control" style="width: 120px;margin-left: 10px" v-model="volunteerEdit.address2">
                                <option v-for="(item,i) in cityList" :key="i">{{item}}</option>
                            </select>
                            <input type="text" v-model="volunteerEdit.address3" style="margin-left: 10px" placeholder="详细地址">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">家庭住址：</label>
                            <input type="text" v-model="volunteerEdit.address">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">身份证号码：</label>
                            <input type="text" v-model="volunteerEdit.idCard">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">专长爱好：</label>
                            <input type="text" v-model="volunteerEdit.hobby">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">外语语种：</label>
                            <select class="form-control" v-model="volunteerEdit.languageType" style="width: 120px;">
                                <option value="0">汉语</option>
                                <option value="1">英语</option>
                                <option value="2">日语</option>
                                <option value="3">韩语</option>
                            </select>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">计算机及熟练程度：</label>
                            <input type="text" v-model="volunteerEdit.computerType">
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">健康状况：</label>
                            <input type="text" v-model="volunteerEdit.healthStatus">
                        </li>
                        <li class="list-group-item" >
                            <label class="u_label">自我介绍：</label>
                            <textarea rows="5" class="text" v-model="volunteerEdit.selfIntroduction"></textarea>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">培训记录：</label>
                            <textarea rows="5" class="text" v-model="volunteerEdit.trainingRecord">暂无</textarea>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">奖励记录：</label>
                            <textarea rows="5" class="text" v-model="volunteerEdit.rewardsRecord">暂无</textarea>
                        </li>
                        <li class="list-group-item">
                            <label class="u_label">附件：</label>
                            <input type="file" @change="imgUpload($event,2)" style="width: 86px">
                            <span style="line-height:30px" v-show="attachmentArr.length > 0">已上传附件:</span>
                            <span style="line-height:30px" v-show="attachmentArr.length == 0">未上传附件</span>
                            <!-- {{volunteerEdit.accessoryUrl}} -->
                            <div class="u_box">
                                <p class="u_one" v-for="(item,i) in attachmentArr" :key="i" title="点击删除" @click="删除附件(i)">{{item}}<i class="glyphicon glyphicon-remove"></i></p>
                            </div>
                        </li>
                        <div class="img-box">
                            <label for="addImg" class="add_label cus" title="点击更换照片">
                                <i class="add glyphicon glyphicon-plus" v-if="!volunteerEdit.headerImg"></i>
                                <img :src="baseUrl + volunteerEdit.headerImg" alt="" v-else>
                                <input type="file" id="addImg" style="display: none" accept="image/*" @change="imgUpload($event,1)">
                            </label>
                        </div>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" @click="获取志愿者列表()">关闭</button>
                    <button type="button" class="btn btn-primary" @click="保存修改()">保存</button>
                </div>
                </div>
            </div>
        </div>

        <!-- 活动录入添加志愿者模态框 -->
        <div class="modal fade" id="myModal3" tabindex="-2" role="dialog" aria-labelledby="myModalLabel3">
            <div class="modal-dialog u-modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">选择志愿者</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-inline form">
                            <div class="form-group">
                                <label for="area">地区</label>
                                <select class="form-control" id="area">
                                    <option value="0" selected>四川省成都市</option>
                                </select>
                                <select class="form-control" id="area2" v-model="searForm.currentAddress">
                                    <option value="" selected>全部</option>
                                    <option v-for="(item,i) in cityList" :key="i">{{item}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="name2">姓名</label>
                                <input class="form-control" type="text" v-model="searForm.name">
                            </div>
                            <div class="form-group">
                                <label for="sex2">性别</label>
                                <select class="form-control" v-model="searForm.sex">
                                    <option value="">全部</option>
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>年龄</label>
                                <input type="number" class="form-control" style="width: 60px;" v-model="startAge">
                                -
                                <input type="number" class="form-control" style="width: 60px;" v-model="endAge">
                            </div>
                            <div class="form-group">
                                <label for="height">身高</label>
                                <!-- <input class="form-control" type="number" v-model="searForm.height">(cm) -->
                                <select class="form-control" v-model="searForm.height">
                                    <option value="">全部</option>
                                    <option value="191,300">190以上</option>
                                    <option value="181,190">180~190</option>
                                    <option value="171,180">170~180</option>
                                    <option value="161,170">160~170</option>
                                    <option value="150,160">150~160</option>
                                    <option value="0,149">150以下</option>
                                </select>
                            </div>
                        </form>
                        <div class="btn-box col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="btn submit" @click="获取志愿者列表(2)">筛选</div>
                        </div>
                        <div class="table-box">
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>姓名</th>
                                            <th>性别</th>
                                            <th>出生日期</th>
                                            <th>学校</th>
                                            <th>身高</th>
                                            <th>专长爱好</th>
                                            <th>外语语种</th>
                                            <th>计算机</th>
                                            <th>参加活动次数</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="cus" @click="addName(item.name,item.id)" title="点击添加" v-for="(item,i) in volunteerList">
                                            <td class="active">{{item.id}}</td>
                                            <td class="warning">{{item.name}}</td>
                                            <td class="danger">{{item.sex === '1' ? '男' : '女'}}</td>
                                            <td class="info">{{timeFormat('yyyy-MM-dd',item.birthday)}}</td>
                                            <td class="active">{{item.school}}</td>
                                            <td class="danger">{{item.height}}</td>
                                            <td class="success" :title="item.hobby || ''"><p class="omit">{{item.hobby ? item.hobby : '未知'}}</p></td>
                                            <td class="warning">{{item.languageType ? item.languageType === '0' ? '汉语' : item.languageType === '1' ? '英语' : item.languageType === '2' ? '日语' : '韩语' : '未知'}}</td>
                                            <td class="danger">{{item.computerType ? item.computerType : '未知'}}</td>
                                            <td class="info">0</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <nav aria-label="Page navigation" class="u_pager hidden-xs">
                                <span class="total">总计{{total}}人</span>
                                <ul class="pagination">
                                    <li :class="currentPage === 1 ? 'disabled' : ''" @click="topPage">
                                        <a href="javascript:void(0);" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                    <!-- <li v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)"><a href="javascript:void(0);">{{i}}</a></li> -->
                                    <li v-show="userPages.length < 10" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)"><a href="javascript:void(0);">{{i}}</a></li>
                                    <li v-show="userPages.length > 9" v-for="i in userPages" :class="currentPage === i ? 'active' : ''" @click="selectPage(i)">
                                        <a href="javascript:void(0);" v-if="i == 1 || i == 2 || i == currentPage || i == (currentPage - 1) || i == (currentPage + 1) || i == (userPages.length) || i == (userPages.length - 1)">{{i}}</a>
                                        <a class="u_page_n" href="javascript:void(0);" v-else-if="i == (currentPage - 2)|| i == (currentPage + 2)"><span aria-hidden="true">...</span></a>
                                    </li>
                                    <li :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''" @click="nextPage">
                                        <a href="javascript:void(0);" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                            <nav class="u_pager visible-xs-block">
                                <ul class="pager">
                                    <li @click="topPage" :class="currentPage === 1 ? 'disabled' : ''"><a href="javascript:void(0);">上一页</a></li>
                                    <li @click="nextPage" :class="currentPage === userPages[userPages.length-1] ? 'disabled' : ''"><a href="javascript:void(0);">下一页</a></li>
                                </ul>
                            </nav>
                        </div>
                        <div class="name-box">
                            <p class="selected">已选择：</p>
                            <ul class="name-list">
                                <li class="one" v-for="(item,i) in testNameList" :key="i">
                                    {{item.name}}
                                </li>
                                <li class="one" v-for="(name,i) in selectValunteer" :key="i">
                                    {{name.name}}
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="() => {this.testNameList = [],this.selectValunteer = []}">关闭</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" @click="确认添加()">确认添加</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 活动修改模态框 -->
        <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4">
            <div class="modal-dialog u-modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">修改活动</h4>
                    </div>
                    <div class="modal-body">
                        <ul class="list-group">
                            <li class="list-group-item">
                                <label class="u_label">活动名称：</label>
                                <input type="text" v-model="editActiveForm.name">
                            </li>
                            <li class="list-group-item">
                                <label class="u_label">活动地点：</label>
                                <input type="text" v-model="editActiveForm.address">
                            </li>
                            <li class="list-group-item">
                                <label class="u_label">日期：</label>
                                <input type="date" v-model="editActiveForm.activityTime">
                            </li>
                            <li class="list-group-item">
                                <label class="u_label">志愿者：</label>
                                <div class="btn-box">
                                    <ul class="name-list">
                                        <li class="one cus" v-for="(item,i) in editVolunteer" :key="i" title="点击移除" @click="delName(i,1,item)">
                                            {{item.name}}
                                        </li>
                                        <li class="one add cus" data-toggle="modal" data-target="#myModal3" @click="打开添加志愿者(2)">
                                            <i class="glyphicon glyphicon-plus"></i>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="保存活动修改()">保存</button>
                    </div>
                </div>
            </div>
        </div>
         <!-- 警告框 -->
         <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="delModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">警告</h4>
                    </div>
                    <div class="modal-body">
                        你确定要删除吗？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" @click="()=>{delId=''}">取消</button>
                        <button type="button" v-show="this.delId" class="btn btn-danger" @click="确认删除()">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 加载动画 -->
        <div class="loading" v-show="!complete">
            <div class="spinner">
                <div class="spinner-container container1">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container2">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
                <div class="spinner-container container3">
                    <div class="circle1"></div>
                    <div class="circle2"></div>
                    <div class="circle3"></div>
                    <div class="circle4"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/bootstrap.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <script src="./static/api/api.js"></script>
    <script src="./static/js/prism.js"></script>
    <script src="./static/js/spop.min.js"></script>
    <script src="./static/js/jszip.min.js"></script>
    <script src="./static/js/FileSaver.js"></script>
    <script src="./static/js/excel-gen.js"></script>
    <!-- <script src="./static/js/html2canvas.min.js"></script> -->
    <!-- <script src="./static/js/jspdf.min.js" charset="utf-8"></script> -->
    <!-- <script src="./static/js/jspdf.customfonts.min.js"></script> -->
    <!-- <script src="./static/js/jspdf.plugin.autotable.min.js" charset="utf-8"></script> -->
    <!-- <script src="./static/js/msyh-normal.js"></script> -->
    <!-- <script src="./static/js/msyhbd-bold.js"></script> -->
    <script>
        let tabs = {
            1: '志愿者录入',
            2: '志愿者查询',
            3: '活动录入',
            4: '活动查询'
        };
        var volunteers = new Vue({
            el: '#volunteers',
            data() {
                return {
                    complete: true,
                    time: this.timeFormat('hh:mm'),
                    date: this.timeFormat('yyyy年MM月dd日'),
                    week: this.timeFormat('D'),
                    baseUrl: api.baseUrl,
                    roles: store.fetch('userLoginInfo').roles,
                    userData: store.fetch('userLoginInfo'),
                    tabCurrent: 3,
                    tabs: tabs,
                    cityList: [],
                    addVolunteer: {
                        accessoryUrl: '',
                        address: '',
                        address1: '四川省成都市',
                        address2: '成华区',
                        address3: '',
                        currentAddress: '',
                        birthday: '',
                        computerType: '',
                        email: '',
                        headerImg: '',
                        healthStatus: '',
                        height: '',
                        hobby: '',
                        idCard: '',
                        languageType: '0',
                        name: '',
                        phone: '',
                        rewardsRecord: '',
                        school: '',
                        selfIntroduction: '',
                        sex: '',
                        specialty: '',
                        trainingRecord: '',
                        weight: ''
                    },
                    pageSize: 10,
                    currentPage: 1,
                    total: 0,
                    userPages: [],//页数
                    searForm: {
                        currentAddress: '',
                        height: '',
                        name: '',
                        sex: '',
                    },
                    startAge: '',
                    endAge: '',
                    volunteerList: [],
                    addNames: [],//添加活动  已选择志愿者
                    testNameList: [],//添加活动 选择志愿者  预选志愿者
                    volunteerEdit: {
                        accessoryUrl: '',
                        address: '',
                        address1: '四川省成都市',
                        address2: '成华区',
                        address3: '',
                        currentAddress: '',
                        birthday: '',
                        computerType: '',
                        email: '',
                        headerImg: '',
                        healthStatus: '',
                        height: '',
                        hobby: '',
                        idCard: '',
                        languageType: '0',
                        name: '',
                        phone: '',
                        rewardsRecord: '',
                        school: '',
                        selfIntroduction: '',
                        sex: '',
                        specialty: '',
                        trainingRecord: '',
                        weight: ''
                    },
                    attachmentArr: [],
                    delId: '',
                    addActivites: {
                        activityTime: '',
                        address: '',
                        name: '',
                        volunteer: ''
                    },
                    activeSearchForm: {
                        name: '',
                        startDate: '',
                        endDate: ''
                    },
                    pageSize1: 10,
                    currentPage1: 1,
                    total1: 0,
                    userPages1: [],//页数
                    activeList: [],
                    editActiveForm: {
                        activityTime: '',
                        address: '',
                        name: '',
                        volunteer: ''
                    },
                    editVolunteer: [],//修改志愿者  已选择志愿者
                    selectValunteer: [],// 修改志愿者 选择志愿者 预选志愿者
                    addType: 1,
                    delType: 1,
                    preDeletIds: '',//预选删除的志愿者id
                    prePlusIds: '',//预选增加的志愿者id
                    deleteIds: '',//确定删除的志愿者id
                    plusIds: '',//确认添加的志愿者id
                    delItem: ''
                }
            },
            created() {

            },
            mounted() {
                this.init();
            },
            methods: {
                init() {
                    this.getDate();
                    this.getCityList();
                    if(this.menuConfig('志愿者录入')) {
                        this.tabClick(1);
                        return false;
                    }
                    if(this.menuConfig('志愿者查询')) {
                        this.tabClick(2);
                        return false;
                    }
                    if(this.menuConfig('活动录入')) {
                        this.tabClick(3);
                        return false;
                    }
                    if(this.menuConfig('活动查询')) {
                        this.tabClick(4);
                        return false;
                    }
                },

                //权限判断
                menuConfig(menuName) {
                    let re = new RegExp(menuName);
                    return re.test(this.roles);
                },
                
                //tab切换
                tabClick(i) {
                    this.tabCurrent = i;
                    this.complete = false;
                    if(i === 1) {
                        this.complete = true;
                        this.addVolunteer = {
                            accessoryUrl: '',
                            address: '',
                            address1: '四川省成都市',
                            address2: '成华区',
                            address3: '',
                            currentAddress: '',
                            birthday: '',
                            computerType: '',
                            email: '',
                            headerImg: '',
                            healthStatus: '',
                            height: '',
                            hobby: '',
                            idCard: '',
                            languageType: '0',
                            name: '',
                            phone: '',
                            rewardsRecord: '',
                            school: '',
                            selfIntroduction: '',
                            sex: '',
                            specialty: '',
                            trainingRecord: '',
                            weight: ''
                        }
                    }
                    if(i === 2) {
                        this.获取志愿者列表();
                    }
                    if(i === 3) {
                        this.获取志愿者列表();
                    }
                    if(i === 4) {
                        this.获取活动列表();
                        this.获取志愿者列表();
                    }
                },

                //时间格式化
                timeFormat(fmt,time=false) {
                    if(time) {
                        var date = new Date(time);
                    }else {
                        var date = new Date()
                    }
                    let week = {
                        0: '日',
                        1: '一',
                        2: '二',
                        3: '三',
                        4: '四',
                        5: '五',
                        6: '六'
                    }
                    var o = { 
                        "M+" : date.getMonth()+1,     //月份 
                        "d+" : date.getDate(),     //日 
                        "h+" : date.getHours(),     //小时 
                        "m+" : date.getMinutes(),     //分 
                        "s+" : date.getSeconds(),     //秒 
                        "q+" : Math.floor((date.getMonth()+3)/3), //季度 
                        "S" : date.getMilliseconds(),    //毫秒
                        "D" : week[date.getDay()]
                    }; 
                    if(/(y+)/.test(fmt)) 
                    fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length)); 
                    for(var k in o) 
                    if(new RegExp("("+ k +")").test(fmt)) 
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length))); 
                    return fmt;
                },

                //动态获取时间、
                getDate() {
                    setInterval(() => {
                        this.time = this.timeFormat('hh:mm');
                        this.date = this.timeFormat('yyyy年MM月dd日');
                        this.week = this.timeFormat('D')
                    },1000)
                },

                //登出
                logout() {
                    store.clear('userLoginInfo');
                    store.clear('userData');
                    window.location.href = '/login.html'
                },

                getCityList() {
                    api.getCityList().then(res => {
                        this.cityList = res.data.list;
                    })
                },

                //提示通知
                通知(title,msg,type) {
                    spop({
                        template: '<h4 class="spop-title">'+title+'</h4>'+msg,
                        style: type,
                        autoclose: 5000
                    });
                },

                //----------------志愿者录入-------------------
                //图片文件上传
                imgUpload(e,i) {
                    let formData = new FormData();
                    let file = e.target.files[0];
                    if(!file) {
                        return false
                    }
                    formData.append('fileName',file);
                    api.upload(formData).then(res => {
                        if(res.data.status == 'success') {
                            if(i === 1) {
                                this.addVolunteer.headerImg = file.name;
                                this.volunteerEdit.headerImg = file.name;
                                this.通知('提示','图片上传成功！','success')
                            }else {
                                if(this.addVolunteer.accessoryUrl) {
                                    this.addVolunteer.accessoryUrl = this.addVolunteer.accessoryUrl + ',' +file.name;
                                }else {
                                    this.addVolunteer.accessoryUrl = file.name;
                                }
                                if(this.volunteerEdit.accessoryUrl) {
                                    this.volunteerEdit.accessoryUrl = this.volunteerEdit.accessoryUrl + ',' +file.name;
                                }else {
                                    this.volunteerEdit.accessoryUrl = file.name;
                                }
                                this.通知('提示','附件上传成功！','success');
                                this.attachmentArr = this.volunteerEdit.accessoryUrl.split(',');
                            }
                        }else {
                            if(i === 1) {
                                this.通知('错误','图片上传失败!','error')
                            }else {
                                this.通知('提示','附件上传失败！','error')
                            }
                        }
                    }).catch(err => {
                        if(i === 1) {
                            this.通知('错误','图片上传失败!','error')
                        }else {
                            this.通知('提示','附件上传失败！','error')
                        }
                    })
                    e.target.value = '';
                },

                提交志愿者() {
                    if(!this.addVolunteer.name || !this.addVolunteer.sex || !this.addVolunteer.birthday || !this.addVolunteer.idCard|| !this.addVolunteer.school || !this.addVolunteer.phone || !this.addVolunteer.address3) {
                        this.通知('错误','标*号的为必填项！','error');
                        return false;
                    }
                    let body = this.addVolunteer;
                    body.currentAddress = body.address1 + ',' + body.address2 + ',' + body.address3;
                    api.添加志愿者(body).then(res => {
                        if(res.data.status == 'success') {
                            this.通知('提示','录入成功！','success');
                            this.addVolunteer = {
                                accessoryUrl: '',
                                address: '',
                                birthday: '',
                                computerType: '',
                                email: '',
                                headerImg: '',
                                healthStatus: '',
                                height: 0,
                                hobby: '',
                                idCard: '',
                                languageType: '',
                                name: '',
                                phone: '',
                                rewardsRecord: '',
                                school: '',
                                selfIntroduction: '',
                                sex: '',
                                specialty: '',
                                trainingRecord: '',
                                weight: 0
                            };
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '志愿者录入',
                                moduleName: '志愿者管理',
                                operation: '录入一名志愿者'
                            }
                            this.recordLog(body)
                        }else {
                            this.通知('错误','录入失败！','error');
                        }
                    }).catch(err => {
                        this.通知('错误','服务器开小差了，请稍后再试！','error');
                    })
                },
                
                //----------------志愿者查询-------------------
                //点击页码
                selectPage(i,type=0) {
                    if(type === 0) {
                        this.currentPage = i;
                        this.获取志愿者列表();
                        return false;
                    }
                    if(type === 1) {
                        this.currentPage1 = i;
                        this.获取活动列表();
                        return false;
                    }
                },
                //上一页
                topPage(type=0) {
                    if(type === 0) {
                        if(this.currentPage === 1) {
                            return false;
                        }
                        this.currentPage --;
                        this.获取志愿者列表()
                    }
                    if(type === 1) {
                        if(this.currentPage1 === 1) {
                            return false;
                        }
                        this.currentPage1 --;
                        this.获取活动列表()
                    }
                },
                //下一页
                nextPage(type=0) {
                    if(type === 0) {
                        if(this.currentPage === this.userPages[this.userPages.length-1]) {
                            return false;
                        }
                        this.currentPage++;
                        this.获取志愿者列表();
                    }
                    if(type === 1) {
                        if(this.currentPage1 === this.userPages1[this.userPages1.length-1]) {
                            return false;
                        }
                        this.currentPage1 ++;
                        this.获取活动列表();
                    }
                },
                获取志愿者列表(i=1) {
                    if(i===2) {
                        this.currentPage=1;
                    }
                    let body = {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize
                    };
                    let search = this.searForm;
                    if(search.currentAddress) {
                        body.currentAddress = this.searForm.currentAddress;
                    }
                    if(search.name) {
                        body.name = search.name;
                    }
                    if(search.sex) {
                        body.sex = search.sex;
                    }
                    if(search.height) {
                        body.minHeight = search.height.split(',')[0];
                        body.maxHeight = search.height.split(',')[1];
                    }
                    if(this.startAge) {
                        let nowYear = this.timeFormat('yyyy');
                        let nowMonth = this.timeFormat('MM-dd');
                        let endDate = (nowYear - this.startAge) + '-' + nowMonth;
                        if(this.startAge < this.endAge) {
                            body.endDate = endDate;
                        }else {
                            body.startDate = endDate;
                        }
                    }
                    if(this.endAge) {
                        let nowYear = this.timeFormat('yyyy');
                        let nowMonth = this.timeFormat('MM-dd');
                        let startDate = (nowYear - this.endAge) + '-' + nowMonth;
                        if(this.startAge < this.endAge) {
                            body.startDate = startDate;
                        }else {
                            body.endDate = startDate;
                        }
                    }
                    api.查询志愿者(body).then(res => {
                        if(res.data.status === 'success') {
                            this.complete = true;
                            let data = res.data.data.list;
                            for (const i in data) {
                                if(data[i].birthday) {
                                    data[i].birthday = data[i].birthday.split(' ')[0];
                                }
                            }
                            this.volunteerList = data;
                            this.userPages = res.data.data.navigatepageNums;
                            this.total = res.data.data.total;
                        }
                    }).catch(err => {
                        this.complete = true;
                        this.通知('提示','服务器开小差了，请稍后再试！','error');
                    })
                },
                导出表格() {
                    let excel = new ExcelGen({
                        "src_id": 'volunteerTable',
                        "show_header": true,
                        "excel_name": '志愿者列表第' + this.currentPage + '页'
                    });
                    excel.generate();
                    let body = {
                        author: this.userData.userName,
                        moduleChileName: '志愿者查询',
                        moduleName: '志愿者管理',
                        operation: '导出志愿者列表'
                    }
                    this.recordLog(body)
                },
                修改(item) {
                    this.volunteerEdit = item;
                    this.volunteerEdit.address1 = '四川省成都市';
                    this.volunteerEdit.address2 = item.currentAddress.split(',')[1];
                    this.volunteerEdit.address3 = item.currentAddress.split(',')[2];
                    this.attachmentArr = item.accessoryUrl.length > 0 ? item.accessoryUrl.split(',') : [];
                },
                删除附件(i) {
                    this.attachmentArr.splice(i,1);
                },
                保存修改() {
                    let body = this.volunteerEdit;
                    body.currentAddress = body.address1 + ',' + body.address2 + ',' + body.address3;
                    body.accessoryUrl = this.attachmentArr.join(',');
                    api.修改志愿者(body).then(res => {
                        if(res.data.status == 'success') {
                            this.通知('提示','修改成功！','success');
                            $('#myModal2').modal('hide');
                            this.获取志愿者列表()
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '志愿者查询',
                                moduleName: '志愿者管理',
                                operation: '修改一名志愿者数据'
                            }
                            this.recordLog(body)
                        }else {
                            this.通知('提示','修改失败！','error');
                        }
                    }).catch(err => {
                        this.通知('提示','服务器开小差了，请稍后再试！','error');
                    })
                },
                删除(id) {
                    this.delId = id;
                    this.delType = 1;
                },
                确认删除() {
                    let body = {
                        id: this.delId
                    }
                    if(this.delType === 1) {
                        api.删除志愿者(body).then(res => {
                            if(res.data.status == 'success') {
                                this.通知('提示','删除成功！','success');
                                this.获取志愿者列表();
                                $('#delModal').modal('hide');
                                let body = {
                                    author: this.userData.userName,
                                    moduleChileName: '志愿者录入',
                                    moduleName: '志愿者管理',
                                    operation: '删除一名志愿者'
                                }
                                this.recordLog(body)
                            }else {
                                this.通知('错误','删除失败！','error');
                                $('#delModal').modal('hide');
                            }
                        }).catch(err => {
                            this.通知('错误','服务器开小差了，请稍后再试！','error');
                            $('#delModal').modal('hide');
                        })
                    }else {
                        console.log(this.delItem.volunteerArr,this.delItem.volunteer)
                        if(this.delItem.volunteerArr.length > 0 || this.delItem.volunteer.length > 1) {
                            this.通知('错误','删除失败！请先点击修改按钮，删除所有参与活动志愿者，再删除活动！','error');
                            $('#delModal').modal('hide');
                            return false;
                        }
                        api.删除活动(body).then(res => {
                            if(res.data.status == 'success') {
                                this.通知('提示','删除成功！','success');
                                this.获取活动列表();
                                $('#delModal').modal('hide');
                                let body = {
                                    author: this.userData.userName,
                                    moduleChileName: '活动查询',
                                    moduleName: '志愿者管理',
                                    operation: '删除一条活动记录'
                                }
                                this.recordLog(body)
                            }else {
                                this.通知('错误','删除失败！','error');
                                $('#delModal').modal('hide');
                            }
                        }).catch(err => {
                            this.通知('错误','服务器开小差了，请稍后再试！','error');
                            $('#delModal').modal('hide');
                        })
                    }
                },
                //----------------活动录入---------------------
                delName(i,type,item={}) {
                    if(this.addType === 1) {
                        if(type === 1) {
                            this.addNames.splice(i,1)
                        }else {
                            this.testNameList.splice(i,1)
                        }
                    }else {
                        if(type === 1) {
                            this.editVolunteer.splice(i,1);
                            if(!this.deleteIds) {
                                this.deleteIds = item.id;
                            }else {
                                this.deleteIds = this.deleteIds + ',' + item.id;
                            }
                            console.log(this.deleteIds)
                        }else {
                            this.selectValunteer.splice(i,1)
                        }
                    }
                },
                addName(name,id) {
                    let one = {
                        name,
                        id
                    }
                    if(this.addType === 1) {
                        this.testNameList.push(one);
                    }
                    if(this.addType === 2) {
                        this.selectValunteer.push(one);
                        if(!this.prePlusIds) {
                            this.prePlusIds = '' + one.id;
                        }else {
                            this.prePlusIds = this.prePlusIds + ',' + one.id;
                        }
                    }
                },

                打开添加志愿者(type=1) {
                    if(type === 1) {
                        this.testNameList = [];
                        for (const item of this.addNames) {
                            this.testNameList.push(item)
                        }
                        this.addType = 1;
                    }else {
                        this.selectValunteer = [];
                        for (const item of this.editVolunteer) {
                            this.selectValunteer.push(item)
                        }
                        this.addType = 2
                    }
                },

                确认添加() {
                    if(this.addType === 1) {
                        this.addNames = [...this.testNameList]
                    }else {
                        this.editVolunteer = [...this.selectValunteer];
                        this.plusIds = this.prePlusIds;
                        // this.deleteIds = this.preDeletIds;
                    }
                },

                活动录入() {
                    if(!this.addActivites.name) {
                        this.通知('错误','请填写活动名称','error');
                        return false;
                    }
                    if(!this.addActivites.address) {
                        this.通知('错误','请填写活动地点','error');
                        return false;
                    }
                    if(!this.addActivites.activityTime) {
                        this.通知('错误','请填写活动时间','error');
                        return false;
                    }
                    if(this.addNames.length < 1) {
                        this.通知('错误','请添加志愿者','error');
                        return false;
                    }
                    let body = this.addActivites;
                    let names = '';
                    let ids = '';
                    for (const item of this.addNames) {
                        if(!names) {
                            names = item.name + '/' + item.id;
                        }else {
                            names = names + ',' + item.name + '/' + item.id;
                        }
                        if(!ids) {
                            ids = item.id;
                        }else {
                            ids = ids + ',' + item.id;
                        }
                    }
                    body.volunteer = names;
                    body.ids = ids;
                    api.添加活动(body).then(res => {
                        if(res.data.status == 'success') {
                            this.通知('提示','录入成功！','success');
                            this.addActivites = {
                                activityTime: '',
                                address: '',
                                name: '',
                                volunteer: ''
                            }
                            this.addNames = [];
                            this.testNameList = []
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '活动录入',
                                moduleName: '志愿者管理',
                                operation: '录入一条活动数据'
                            }
                            this.recordLog(body)
                        }else {
                            this.通知('错误','录入失败','error');
                        }
                    }).catch(err => {
                        this.通知('错误','服务器开小差了！','error');
                    })
                },

                //----------------活动查询---------------------
                获取活动列表(i=1) {
                    if(i === 2) {
                        this.currentPage1 = 1;
                    }
                    let body = {
                        pageNum: this.currentPage1,
                        pageSize: this.pageSize1,
                    }
                    if(this.activeSearchForm.name) {
                        body.name = this.activeSearchForm.name;
                    }
                    if(this.activeSearchForm.startDate) {
                        if(new Date(this.activeSearchForm.startDate) > new Date()) {
                            this.通知('错误','您选择的开始时间无效！','error');
                            return false;
                        }
                        if(!this.activeSearchForm.endDate) {
                            this.通知('错误','您选择的结束时间无效！','error');
                            return false;
                        }
                        body.startDate = this.activeSearchForm.startDate
                    }
                    if(this.activeSearchForm.endDate) {
                        if(!this.activeSearchForm.startDate) {
                            this.通知('错误','您选择的开始时间无效！','error');
                            return false;
                        }
                        body.endDate = this.activeSearchForm.endDate
                    }
                    if(this.activeSearchForm.startDate && this.activeSearchForm.endDate) {
                        if((new Date(this.activeSearchForm.startDate).valueOf() - new Date(this.activeSearchForm.endDate).valueOf()) > 0) {
                            this.通知('错误','您选择时间区间无效！','error');
                            return false;
                        }
                    }
                    this.complete = false;
                    api.获取活动列表(body).then(res => {
                        this.complete = true;
                        if(res.data.status == 'success') {
                            let data = [...res.data.data.list];
                            for (let index = 0; index < data.length; index++) {
                                if(data[index].volunteer.length > 0) {
                                    let arr = data[index].volunteer.split(',');
                                    let one = '';
                                    data[index].volunteerArr = [];
                                    for (const item of arr) {
                                        one = {
                                            name: item.split('/')[0],
                                            id: item.split('/')[1]
                                        }
                                        data[index].volunteerArr.push(one)
                                    }
                                }else {
                                    data[index].volunteerArr = [];
                                }
                            }
                            for (let i = 0; i < data.length; i++) {
                                let newArr = data[i].volunteer.split(',');
                                let str = '';
                                for (const item of newArr) {
                                    if(!str) {
                                        str = item.split('/')[0];
                                    }else {
                                        str = str + ',' + item.split('/')[0]
                                    }
                                }
                                data[i].volunteer = str;
                            }
                            this.activeList = data;
                            console.log(data)
                            this.userPages1 = res.data.data.navigatepageNums;
                            this.total1 = res.data.data.total;
                        }
                    }).catch(err => {
                        this.通知('错误','服务器开小差了！','error');
                    })
                },

                修改活动(item) {
                    this.addType = 2;
                    this.editActiveForm = {...item};
                    this.editVolunteer = [...item.volunteerArr];
                    this.preDeletIds = '';
                    this.prePlusIds = '';
                    this.deleteIds = '';
                    this.plusIds = '';
                },
                保存活动修改() {
                    let body = {...this.editActiveForm};
                    body.plusIds = this.plusIds;
                    body.deleteIds = this.deleteIds;
                    let str = '';
                    for (const item of this.editVolunteer) {
                        if(!str) {
                            str = item.name + '/' + item.id
                        }else {
                            str = str + ',' + item.name + '/' + item.id
                        }
                    }
                    body.volunteer = str;
                    console.log(body);
                    // return false;
                    api.更新活动(body).then(res => {
                        if(res.data.status == 'success') {
                            this.通知('提示','修改成功！','success');
                            $('#myModal4').modal('hide');
                            this.editVolunteer = [];
                            this.selectValunteer = [];
                            this.preDeletIds = '';
                            this.prePlusIds = '';
                            this.deleteIds = '';
                            this.plusIds = '';
                            this.获取活动列表();
                            let body = {
                                author: this.userData.userName,
                                moduleChileName: '活动查询',
                                moduleName: '志愿者管理',
                                operation: '修改一条活动数据'
                            }
                            this.recordLog(body)
                        }else {
                            this.通知('错误','修改失败!','error');
                        }
                    }).catch(err => {
                        this.通知('错误','服务器开小差了！','error');
                    })
                },
                删除活动(item) {
                    this.delItem = item;
                    this.delId = item.id;
                    this.delType = 2;
                },
                recordLog(body,fn=false) {
                    api.updateLog(body).then(res => {
                        if(fn) {
                            let newFN = new Function(fn);
                            newFN();
                        }
                    }).catch(err => {
                        console.error(err)
                    })
                },
                
            }
        })
    </script>
</body>
</html>